<template>
	<view class="container" v-if="detailInfo">
		<view class="courseIntro">
			<view class="pic">
				<image :src="detailInfo.thumb" mode=""></image>
			</view>
			<view class="intro">
				<view class="titleArea">
					<view class="title">
						<text>{{detailInfo.goods_name}}</text>
					</view>
					<view class="jieshao">
						{{detailInfo.content}}
					</view>
					<view class="jigou">
						<text>{{detailInfo.shop_name}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="subject" v-if="detailInfo.spec.goods_spec">
				<view class="titleBar">
					<view class="icon"></view>
					<view class="title">
						班级选择：
					</view>
				</view>
				<view class="listContainer">
					<view :class="['item',{'active':gradeIndex===index}]" :key="index" @click="gradeSelect(item,index)"
						v-for="(item,index) in detailInfo.spec.goods_spec.value">
						{{item.spec_value}}
					</view>
				</view>
			</view>
			<view class="subject" v-if="detailInfo.spec.period_type===1||detailInfo.spec.period_type===2">
				<view class="titleBar" v-if="detailInfo.spec.period_type===2||
					detailInfo.spec.period_type===1&&detailInfo.spec.period">
					<view class="icon"></view>
					<view class="title">
						规格：
					</view>
				</view>
				<view class="listContainer">
					<view v-if="detailInfo.spec.period_type===2||
					detailInfo.spec.period_type===1&&detailInfo.spec.period" class="listContainer">
						<view :class="['item',{'active':timeIndex===index}]" :key="index"
							@click="timeSelect(item,index)"
							v-for="(item,index) in detailInfo.spec.period.value">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="titleBar">
					<view class="icon"></view>
					<view class="title">
						时间选择：
					</view>
				</view>
				<view class="listContainer">
					<view v-if="detailInfo.spec.period_type===1&&detailInfo.period">
						<view :class="['item',{'active':timeIndex===index}]" :key="index"
							@click="timeSelect(item,index)" v-for="(item,index) in detailInfo.period.value">
							{{item.name}}
						</view>
					</view>
					<view v-else :class="{'active':start_date!==''&&end_date!==''}" @click="openData()">
						<text v-if="start_date!==''&&end_date!==''">
							{{start_date}}至{{end_date}}
						</text>
						<view v-else class="item">
							请选择时间段
						</view>
					</view>
				</view>
			</view>
			<view class="subject" 
			v-if="detailInfo.spec&&detailInfo.spec.other_service&&detailInfo.spec.other_service.value.length>0">
				<view class="titleBar">
					<view class="icon"></view>
					<view class="title">
						{{detailInfo.spec.other_service.name}}：
					</view>
				</view>
				<view class="listContainer">
					<view :class="['item',{'active':item.selectFlag}]" :key="index" @click="serviceSelect(item,index)"
						v-for="(item,index) in detailInfo.spec.other_service.value">
						{{item.name+':'+item.price}}/月
					</view>
				</view>
			</view>
		</view>
		<view class="footBar">
			<view class="price">
				总计：<text>¥{{price}}</text>
			</view>
			<view class="goumai" @click="checkOrder()">
				立即购买
			</view>
		</view>
		<uni-calendar
		:insert="false" 
		:showMonth="false" 
		:range="true" 
		:selectPre="false"
		:preDate="false"
		ref="calendar"
		@change="change">
		</uni-calendar>
	</view>
</template>
<script>
	export default {
		data() {
			const date = new Date();
			const month = date.getMonth() + 1;
			const months = []
			for (let i = month; i <= 12; i++) {
				months.push(i)
			}
			return {
				token: "",
				goods_id: "",
				detailInfo: "",
				grade: {
					name: "",
					id: "",
				},
				time: {
					name: "",
					id: "",
				},
				gradeIndex: null,
				timeIndex: null,
				serviceId: [],
				fuwuxiabiao: false,
				price: 0,
				orderNo: "",
				start_months: months,
				end_months: months,
				timeSelected: "",
				start_date: "",
				end_date: "",
				date: "",
				year: date.getFullYear(),
				month:month>9?month:'0'+month,
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			console.log(option.goods_id); //打印出上个页面传递的参数。
			this.goods_id = option.goods_id;
			uni.showLoading({
				title:"加载中...",
				mask:true
			})
			uni.getStorage({
				key: 'user_info',
				success: (res) => {
					this.token = res.data.token;
					this.getInfo()
				}
			});
		},
		methods: {
			change(e) {
				if (e.range && e.range.data && e.range.data.length > 0) {
					if(this.dateCompare(e.range.before, e.range.after)){
						this.start_date = e.range.before;
						this.end_date = e.range.after;
					}else{
						this.start_date = e.range.after;
						this.end_date = e.range.before;
					}
				} else {
					if (e.range.before) {
						this.start_date = e.range.before;
						this.end_date = e.range.before;
					} else {
						this.start_date = e.fulldate;
						this.end_date = e.fulldate;
					}
				}
				this.changeSpec();
			},
			/**
			 * 比较时间大小
			 */
			dateCompare(startDate, endDate) {
				// 计算截止时间
				startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
				// 计算详细项的截止时间
				endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
				if (startDate < endDate) {
					return true
				} else {
					return false
				}
			},
			
			openData() {
				this.$refs.calendar.open();
			},
			changeSpec() {
				let param;
				param = {
					'token': this.token,
					'goods_id': this.detailInfo.goods_id, //规格id
				}
				if (this.detailInfo.spec.period_type === 1 || this.detailInfo.spec.period_type === 2) {
					if (this.detailInfo.spec.period_type === 1) { //选择日期
						let start_date = this.start_date.replace(/-/g, '');
						let end_date = this.end_date.replace(/-/g, '');
						param.start_date = start_date;
						param.end_date = end_date;
					}
					param.period_id = this.time.id;
				}
				if (this.grade.id) {
					param.goods_spec_id = this.grade.id;
				}
				if (this.serviceId.length !== 0) {
					param.other_service_id = this.serviceId.join(',');
				}
				uni.request({
					url: 'https://mx.acktechnologies.com.cn/api/wxapp/apply/changeSpec',
					method: 'GET',
					data: param,
					success: res => {
						console.log(res)
						if (res && res.data && res.data.code === 1) {
							this.price = res.data.data.price;
						}
					},
					fail: (res) => {
						console.log(res)
					},
					complete: (res) => {
						console.log(res)
					}
				});
			},
			openJieshao() {
				this.$refs.popup.open();
			},
			close() {
				this.$refs.popup.close()
			},
			gradeSelect(obj, index) {
				console.log(index)
				this.grade.name = obj.spec_value;
				this.grade.id = obj.goods_spec_id;
				this.gradeIndex = Number(index);
				this.changeSpec();
			},
			timeSelect(obj, index) {
				this.time.name = obj.name;
				this.time.id = obj.period_id;
				this.timeIndex = index;
				console.log(this.grade.id , this.time.id)
				if (this.time.id) {
					this.changeSpec();
				}
			},
			serviceSelect(obj, index) {

				this.detailInfo.spec.other_service.value[index].selectFlag = !this.detailInfo.spec.other_service.value[
						index]
					.selectFlag;
				if (this.detailInfo.spec.other_service.value[index].selectFlag) {
					this.serviceId.push(this.detailInfo.spec.other_service.value[index].other_service_id);
				} else {
					this.serviceId.some((item, k) => {
						if (item === this.detailInfo.spec.other_service.value[index].other_service_id) {
							this.serviceId.splice(k, 1)
							//在数组的some方法中，如果return true，就会立即终止这个数组的后续循环
							return true;
						}
					});
				}
				this.changeSpec();
			},
			getInfo() {
				uni.request({
					url: 'https://mx.acktechnologies.com.cn/api/wxapp/mine/index/getGoodsSpec',
					method: 'GET',
					data: {
						'token': this.token,
						'goods_id': this.goods_id,
					},
					success: res => {
						console.log(res)
						uni.hideLoading();
						if (res && res.data && res.data.code === 1) {
							this.detailInfo = res.data.data;
							this.price = this.detailInfo.goods_price;
							if (this.detailInfo.spec.other_service) {
								for (let i = 0; i < this.detailInfo.spec.other_service.value.length; i++) {
									if (this.detailInfo.spec.other_service.value[i].selected === 0) {
										this.$set(this.detailInfo.spec.other_service.value[i], "selectFlag",
											false)
									} else {
										this.$set(this.detailInfo.spec.other_service.value[i], "selectFlag",
											true)
									}

								}
							}
						}
					},
					fail: (res) => {
						console.log(res)
					},
					complete: (res) => {
						console.log(res)
					}
				});
			},
			checkOrder() {
				this.orderHadle();
			},
			orderHadle() {
				let param = {
					'token': this.token,
					'goods_id': this.detailInfo.goods_id,
				}
				if (this.detailInfo.spec.period_type === 1 || this.detailInfo.spec.period_type === 2) {
					if (this.detailInfo.spec.period_type === 1) { //选择日期
						let start_date = this.start_date.replace(/-/g, '');
						let end_date = this.end_date.replace(/-/g, '');
						param.start_date = start_date.slice(0, 4) + '-' +
							(start_date.length !== 5 ? start_date.slice(4, 6) : ('0' + start_date.slice(4, 5)));
						param.end_date = end_date.slice(0, 4) + '-' +
							(end_date.length !== 5 ? end_date.slice(4, 6) : ('0' + end_date.slice(4, 5)));
					} else {
						param.period_id = this.time.id;
					}
				}
				if (this.grade.id) {
					param.goods_spec_id = this.grade.id;
				}
				if (this.time.id) {
					param.period_id = this.time.id; //时间选择id
				}
				if (this.serviceId.length !== 0) {
					param.other_service_id = this.serviceId.join(',');
				}
				uni.request({
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					url: 'https://mx.acktechnologies.com.cn/api/wxapp/apply/takeOrder',
					method: 'POST',
					data: param,
					success: res => {
						console.log(res)
						if (res && res.data && res.data.code === 1) {
							this.orderNo = res.data.data.order_no;
							console.log(this.orderNo)
							uni.redirectTo({
								url: '../../order/index?order=' + this.orderNo
							});
						} else {
							uni.showToast({
								title: res.data.msg,
								duration: 2000,
								icon: 'none',
							});
						}

					},
					fail: (res) => {
						console.log(res)
					},
					complete: (res) => {
						console.log(res)
					}
				});

			},
			takeOrder() {
				if (this.grade.id === '') {
					uni.showToast({
						title: '请选择班级！',
						duration: 2000,
						icon: 'none',
					});
					return false;
				}
				if (this.detailInfo.period && this.time.id === '') {
					uni.showToast({
						title: '请选择时间！',
						duration: 2000,
						icon: 'none',
					});
					return false;
				}
				this.orderHadle();
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100%;
	}

	.main {
		padding: 0 40rpx;
		box-sizing: border-box;
	}

	.data {
		margin-top: 20rpx;
	}

	.wancheng {
		height: 56rpx;
		line-height: 56rpx;
		text-align: right;
		padding: 0 20px;
		box-sizing: border-box;
	}

	.dataContainer {
		width: 750rpx;
		background-color: #FFFFFF;

		.picker-view {
			width: 750rpx;
			height: 350rpx;
			margin-top: 20rpx;
			text{
				margin-top: 150rpx;
			}
		}

		.item {
			height: 50px;
			align-items: center;
			justify-content: center;
			text-align: center;
		}
	}

	.courseIntroContent {
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 10px 10px 0px 0px;
		padding: 0 40rpx 88rpx 40rpx;
		box-sizing: border-box;

		.toolBar {
			height: 132rpx;
			line-height: 132rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			image {
				display: block;
				width: 24rpx;
				height: 24rpx;
			}
		}

		.content {
			text-align: justify;
		}
	}

	.courseIntro {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding: 40rpx;

		.pic {
			width: 136rpx;
			height: 136rpx;
			border-radius: 8px;
			overflow: hidden;
			margin-right: 20rpx;
			flex-shrink: 0;

			image {
				display: block;
				width: 100%;
				height: 100%;
				border-radius: 8px;
			}
		}

		.intro {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;

			.title {
				font-size: 17px;
				font-family: SourceHanSansCN-Medium, SourceHanSansCN;
				font-weight: 500;
				color: #333333;
				line-height: 16px;
			}

			.jieshao {
				width: 510rpx;
				font-size: 15px;
				line-height: 26px;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #333333;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.jigou text {
				padding: 3px 4px 3px 5px;
				background: #FFFFFF;
				border-radius: 2px;
				border: 1px solid #66A8A0;
				font-size: 13px;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #66A8A0;
			}

			.price {
				font-size: 18px;
				font-family: SourceHanSansCN-Medium, SourceHanSansCN;
				font-weight: 500;
				color: #ED6A2A;
				line-height: 20px;

				text {
					font-size: 12px;
					margin-right: 3px;
				}
			}
		}
	}

	.courseDetail {
		width: 670rpx;
		height: 480rpx;
		background: #FFFFFF;
		box-shadow: 0px 2px 10px 0px #E9EBF6;
		border-radius: 16rpx;
		margin: 0 auto;
		padding: 44rpx 12rpx 38rpx 24rpx;
		box-sizing: border-box;
	}

	.grade {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

		.gradeLeft {
			display: flex;
			flex-direction: row;
			align-items: center;

			image {
				display: block;
				width: 28rpx;
				height: 28rpx;
				margin-right: 24rpx;
			}
		}

		.icon {
			image {
				display: block;
				width: 18rpx;
				height: 28rpx;
			}
		}
	}

	.list {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 20rpx;
		margin-left: 52rpx;

		.item {
			font-size: 13px;
			font-family: SourceHanSansCN-Normal, SourceHanSansCN;
			font-weight: 400;
			color: #FDA072;
			padding: 2px 13px 3px 13px;
			background: #FDF2F3;
			border-radius: 2px;
			margin-right: 20rpx;
		}

		.item:last-child {
			margin-right: 0;
		}
	}

	.zhaosheng {
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 15px;
		font-family: SourceHanSansCN-Normal, SourceHanSansCN;
		font-weight: 400;
		color: #333333;
		margin-top: 38rpx;

		image {
			display: block;
			width: 28rpx;
			height: 28rpx;
			margin-right: 24rpx;
		}
	}

	.teacherIntro {
		width: 626rpx;
		height: 118rpx;
		margin: 42rpx auto 0 auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		border-top: 1px solid #E0E0E0;

		.avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;

			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
		}

		.intro {
			width: 460rpx;
			padding-left: 20rpx;
			box-sizing: border-box;

			.teacherName {
				font-size: 30rpx;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #666666;
			}

			.dianhua {
				font-size: 26rpx;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #999999;
				margin-top: 10rpx;
			}
		}
	}

	.courseInfo {
		width: 650rpx;
		margin: 40rpx auto;

		.title {
			font-size: 20px;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 500;
			color: #333333;
		}

		.content {
			padding-bottom: 112rpx;

			.cell {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				margin-top: 48rpx;

				.biaoti {
					font-size: 15px;
					font-family: SourceHanSansCN-Medium, SourceHanSansCN;
					font-weight: 500;
					color: #333333;
					flex-shrink: 0;
				}

				.jieshao {
					width: 442rpx;
					font-size: 13px;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #999999;
					margin: 0 54rpx 0 24rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.icon {
					width: 12rpx;
					height: 20rpx;

					image {
						display: block;
						width: 12rpx;
						height: 20rpx;
					}
				}
			}
		}
	}

	.footBar {
		width: 100%;
		height: 88rpx;
		background-color: #FFFFFF;
		box-shadow: 0px -2px 6px 0px rgba(0, 0, 0, 0.09);
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0 40rpx;
		box-sizing: border-box;

		.goumai {
			width: 232rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			background: linear-gradient(90deg, #FF5B2D 0%, #FD5629 100%);
			border-radius: 30rpx;
			font-size: 15px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
	}

	.selectContainer {
		width: 750rpx;
		max-height: 95vh;
		background: #FFFFFF;
		padding: 40rpx;
		border-radius: 10px 10px 0px 0px;
		box-sizing: border-box;

		.goumai {
			width: 670rpx;
			height: 96rpx;
			line-height: 96rpx;
			text-align: center;
			font-size: 18px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			background: linear-gradient(90deg, #FF5C2E 0%, #FD5629 100%);
			border-radius: 48rpx;
			margin-top: 40rpx;
		}
	}

	.headerContent {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 60rpx;

		.pic {
			width: 136rpx;
			height: 136rpx;
			margin-right: 20rpx;

			image {
				display: block;
				width: 100%;
				height: 100%;
			}
		}

		.title {
			font-size: 15px;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 500;
			color: #333333;
		}

		.price {
			font-size: 18px;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 500;
			color: #ED6A2A;
			line-height: 20px;
			margin-top: 24rpx;

			text {
				font-size: 12px;
				margin-right: 3px;
			}
		}
	}

	.subject {
		margin-top: 20rpx;

		.titleBar {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;

			.icon {
				width: 4px;
				height: 12px;
				background: #9DE3BA;
				border-radius: 1px;
				margin-right: 20rpx;
			}

			.title {
				font-size: 15px;
				font-family: SourceHanSansCN-Medium, SourceHanSansCN;
				font-weight: 500;
				color: #333333;
			}
		}

		.listContainer {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;
			padding-bottom: 40rpx;

			.item {
				font-size: 15px;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: rgba($color: #333333, $alpha: 0.66);
				padding: 0 68rpx;
				height: 64rpx;
				line-height: 64rpx;
				background: #EEEEEE;
				border-radius: 32rpx;
				margin-right: 40rpx;
				margin-top: 40rpx;
				margin-right: 35rpx;
				box-sizing: border-box;
				border: 1px solid #EEEEEE;
			}

			.active {
				height: 64rpx;
				line-height: 64rpx;
				padding: 0 68rpx;
				background: #EEEEEE;
				border-radius: 32rpx;
				color: #FF3600;
				background: #FFF4F1;
				border: 1px solid #FE572A;
				margin-top: 40rpx;
			}
		}
	}
</style>
